import './modeler.css';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

import { defineComponent, onMounted, watch } from 'vue';
import customModule from "@/components/BpmnEditor/components/modeler/custom"; // 自定义内容
import createDefaultBpmnXml from '@/components/BpmnEditor/bpmn/defaultBpmnXml';
import activitiModdel from '@/components/BpmnEditor/bpmn/resources/activiti-moddel.json';
import { BpmnStore } from '@/components/BpmnEditor/bpmn/store';
import translate from '@/components/BpmnEditor/bpmn/i18n';

export default defineComponent({
  name: 'Modeler',
  props: {
    xml: {
      type: String,
      default: ''
    }
  },
  setup (props, {emit}) {
    const bpmnContext = BpmnStore;

    onMounted(() => {
      bpmnContext.initModeler({
        container: '#modeler-container',
        additionalModules: [
          customModule, // 用自定义元素样式
          { translate: ['value', translate('zh')] },//添加翻译
        ],
        moddleExtensions: {
          activiti: activitiModdel,
        },
      });
      const defaultProcessIdAndName = '1';
      bpmnContext
        .importXML(props.xml || createDefaultBpmnXml(defaultProcessIdAndName, defaultProcessIdAndName))
        .then((result) => {
          if (result.length) {
            console.warn('importSuccess warnings', result);
          }
        })
        .catch((err) => {
          console.warn('importFail errors ', err);
        });

      /**
       * 事件注册
       * 点击节点时显示该节点明细
       */
      // bpmnContext.addEventListener('element.click', async () => {
      //   emit('element-click')
      // })
    })

    watch(() => props.xml, () => {
      bpmnContext.importXML(props.xml)
    })

    return () => (
      <div id="modeler-container" />
    );
  }
})